let username1;
let UserAvatar1;
let Friendname1;
let FriendAvatar1;
// let username='';
function convertTimestampToJavaScriptDate(timestamp) {
    // 使用时间戳创建 JavaScript Date 对象
    var jsDate = new Date(timestamp);

    // 使用 JavaScript Date 对象的方法获取日期和时间信息
    var year = jsDate.getFullYear();
    var month = jsDate.getMonth() + 1; // 月份从 0 开始，所以需要加 1
    var day = jsDate.getDate();
    var hours = jsDate.getHours();
    var minutes = jsDate.getMinutes();
    var seconds = jsDate.getSeconds();

    // 拼接日期和时间信息为可读格式
    var formattedTime = year + '年' + month + '月' + day + '日' + hours + ':' + minutes + ':' + seconds;

    return formattedTime;
}

$(document).ready(function(){
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/My/GetMessages',
        data: {
        },
        dataType: "json",
        success: function (response){
            console.log(response)
            username1=response.user.username
            var list=response.Messages
            for (let i = 0; i < list.length; i++) {
                // console.log(list[i]);
                const chatContent1 = document.getElementById('chat-content');
                const messageContainer = document.createElement('div');
                messageContainer.classList.add('message-container', 'xiaoming-message');
                //
                var messageDiv = document.createElement('div');
                messageDiv.classList.add('message');
                const messageContent = document.createElement('p');
                messageContent.classList.add('message-text');

                messageContent.innerHTML ='<img style=" max-width: 200px;max-height: 300px;" src=" data:image/jpeg;base64,'+list[i].photo+'"/>';


                // messageContainer.innerHTML='<div style=" width: 500px;height: 120px; right: 300px;"> 内容：'+list[i].text+'</div>';
                // messageContainer.innerHTML='<div style="width: 500px;height: 120px; right: 300px;">'+convertTimestampToJavaScriptDate(list[i].date)+'</div>';
                var div1 = document.createElement('div'); // 创建第一个子元素
                div1.style.width = '400px';
                div1.style.height = '80px';
                div1.innerHTML = '内容：' + list[i].text;

                var div2 = document.createElement('div'); // 创建第二个子元素
                div2.style.marginLeft='1px';
                div2.style.width = '400px';
                div2.style.height = '80px';
                div2.innerHTML = convertTimestampToJavaScriptDate(list[i].date);

                // div1.style.float = 'left'; // 设置浮动属性为左浮动
                // div2.style.float = 'left'; // 设置浮动属性为左浮动

                messageContainer.appendChild(div1); // 将第一个子元素添加到父元素中
                messageContainer.appendChild(div2); // 将第二个子元素添加到父元素中
                messageDiv.appendChild(messageContent);
                messageContainer.appendChild(messageDiv);
                chatContent1.appendChild(messageContainer);
                var imageElement1=document.getElementsByClassName('img')

                chatContent1.scrollTop = chatContent1.scrollHeight;
                console.log(list[i].date);
            }
        },
        error:function (response){
            console.log("请求处理失败8");
        }
    });
});
function uploadFormData(formData) {
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/My/SendPhotoMessage",
        data: formData,
        processData: false, // 防止jQuery自动将数据转换为查询字符串
        contentType: false, // 防止jQuery设置Content-Type头部
        success: function(response) {
            // 在这里处理从服务器返回的成功响应
            console.log("表单数据成功提交:", response);
        },
        error: function(xhr, status, error) {
            // 在这里处理错误
            console.error("提交表单数据时出错:", error);
        }
    });
}
function chooseImage() {
    document.getElementById('image-input').click();
}
document.getElementById('image-input').addEventListener('change', function() {
    var fileInput = document.getElementById('image-input');
    var file = fileInput.files[0];
    if (file) {
        var formData = new FormData();
        formData.append('photo', file);
        uploadFormData(formData);
        sendImage();
    }
});
document.getElementById('send-button').addEventListener('click', function() {
    sendMessage();
});
document.getElementById('message-input').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        sendMessage();
    }
});
function sendMessage() {
    var messageInput = document.getElementById('message-input');
    var message = messageInput.value.trim();
    if (message !== '') {
        // 在这里发送消息到后端或显示到聊天界面
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/My/SendTextMessage?message="+message,
            // data: message,
            // processData: true, // 防止jQuery自动将数据转换为查询字符串
            // contentType: true, // 防止jQuery设置Content-Type头部
            success: function(response) {
                // 在这里处理从服务器返回的成功响应
                console.log("表单数据成功提交:", response);
            },
            error: function(xhr, status, error) {
                // 在这里处理错误
                console.error("提交表单数据时出错:", error);
            }
        });

        displayXiaomingMessage(message);
        messageInput.value = '';
    }
}
function sendImage() {
    var imageInput = document.getElementById('image-input');
    var file = imageInput.files[0];
    if (file) {
        // 在这里发送图片到后端或显示到聊天界面
        var reader = new FileReader();
        reader.onload = function(e) {
            var imageSrc = e.target.result;
            displayImageMessage(imageSrc);
        };
        reader.readAsDataURL(file);
    }
}
function displayXiaomingMessage(content) {
    var chatContent = document.getElementById('chat-content');
    var messageContainer = document.createElement('div');
    messageContainer.classList.add('message-container', 'xiaoming-message');

    var messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    var messageContent = document.createElement('p');
    messageContent.classList.add('message-text');
    messageContent.textContent = content+':'+username1;
    messageDiv.appendChild(messageContent);
    messageContainer.appendChild(messageDiv);
    chatContent.appendChild(messageContainer);
    // 滚动到最底部
    chatContent.scrollTop = chatContent.scrollHeight;
}
function displayImageMessage(src) {
    var chatContent = document.getElementById('chat-content');
    var messageContainer = document.createElement('div');
    messageContainer.classList.add('message-container', 'xiaoming-message');
    var messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    var imageElement = document.createElement('img');
    imageElement.src = src;
    imageElement.style.maxWidth = '200px';// 调整图片最大宽度
    imageElement.style.maxHeight='300px';
    messageDiv.appendChild(imageElement);
    messageContainer.appendChild(messageDiv);
    chatContent.appendChild(messageContainer);
    // 滚动到最底部
    chatContent.scrollTop = chatContent.scrollHeight;
}// 在实际应用中，可以通过WebSocket等技术来实现实时聊天功能